<template>
    <div class="contain">
        <div class="logo">
            <h2>简途论坛登录入口</h2>
        </div>
        <div class="main">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size='medium'>
                <el-form-item label="用户姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-tooltip class="item" effect="dark" content="不想登录，继续前往首页!" placement="bottom">
                       <el-button @click="backHome">首页</el-button>
                    </el-tooltip>
                    <router-link to="/register" tag="span" class="goRegister">
                       <el-button type="warning" >注册</el-button>                       
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapMutations } from 'vuex'
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        name:"",
        pass: ""
      },
      rules:{
          name: [
            { required: true, message: '请输入登录名', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
      }
    };
  },
  computed: {
    
  },
  mounted(){
     localStorage.clear();
  },
  methods: {
    submitForm(formName) {
      let  locaUsername = this.ruleForm.name;
      let  _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
           axios.post('/loginApl/auth/login', {
             username:this.ruleForm.name,
             password:this.ruleForm.pass,
           })
            .then(function (response) {
              if(response.data.code == 0){
                 localStorage.username = locaUsername;
                 localStorage.token = response.data.result;
                axios.get('/loginApl/auth/info')
                  .then(function (response) {
                    if(response.data.code == 0){
                      localStorage.userId = response.data.result.userId;
                      response.data.result.roles.forEach(element => {
                          if(element.name == '管理员'){
                              localStorage.roles = 'admin';
                              _this.changeRole();
                          }
                      });
                    } 
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
                 _this.changeName(locaUsername);
                  _this.$router.push('home');
              }else{
                _this.$message.error(response.data.msg);
              }
              
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    backHome() {
      this.$router.push('home');
    },
     ...mapMutations(['changeName','changeRole'])	
  }
};
</script>

<style scoped   lang="scss">
.contain{
    width:500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px 1px #333;
    .logo{
        h2{
            margin-top: 40px;
            text-align: center;
        }
    }
    .main {
    width: 400px;
    height: 155px;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    .goRegister{
      margin-left: 10px;
    }
    }

}

</style>